// app global css in SCSS form
:root {
  --dui-color: #4d5259;
}

// // 重置
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--dui-color);
}

a {
  text-decoration: none;
  // &:link {
  //   color: $accent;
  // }

  // &:visited {
  //   color: $secondary
  // }
}

// -----------主内容容器背景
.q-page-container {
  background: #f1f2f6;
}

// 页头
.q-header>.q-toolbar {
  height: 55px;
}


// -----------侧边栏样式

// .q-drawer {
//   background: $primary;
// }

.q-drawer .q-separator {
  background: rgba($color: $black, $alpha: .1);
}

// .q-layout__shadow:after {
//   box-shadow: 0 0 5px rgba(0, 0, 0, 0.08), 0 0 5px rgba(0, 0, 0, 0.08);
// }

// .q-drawer .q-item {
//   color: rgba($color: $secondary, $alpha: .8);
// }

// .q-item__section--side {
//   padding-right: 5px;
//   color: $secondary;
// }
.q-drawer {

  .q-item.q-router-link--active,
  .q-item--active {
    border-right: 3px solid rgba($color: $primary, $alpha: 1);
    background: rgba($color: $black, $alpha: .075);
  }

  .q-item__section--side>.q-icon {
    font-size: 20px;
  }

  .q-item__section--avatar {
    min-width: 30px;
  }
}

// a.q-item--clickable,
// div.q-item--clickable {
//   color: var(--dui-color);
// }

// -----------侧边栏深色背景
.q-dark {
  color: rgba($color: $white, $alpha: .75);

  i.q-expansion-item__toggle-icon {
    color: rgba($color: $white, $alpha: .75);
  }

  .q-item.q-router-link--active,
  .q-item--active {
    // border-right: 3px solid rgba($color: $white, $alpha: .35);
    background: rgba($color: $white, $alpha: .075);
    border-right: 3px solid rgba($color: $white, $alpha: .5);
    color: rgba($color: $white, $alpha: 1);
  }

  .q-expansion-item--expanded>.q-expansion-item__container>.q-item {
    color: rgba($color: $white, $alpha: .8);
  }

  .q-expansion-item--expanded i.q-expansion-item__toggle-icon {
    color: rgba($color: $white, $alpha: 1);
  }

  .cus-copyright {
    color: rgba($color: $white, $alpha: .4);
  }

}

// -----------翻页
.q-pagination .q-btn__wrapper:before {
  box-shadow: none;
}

// -----------表格
.q-table__card {
  color: var(--dui-color);
}


// // 自定义
// ----------侧边栏
.cus-copyright {
  color: rgba($color: $black, $alpha: .5);
  font-size: 10px
}

// ----------显示textarea内容带换行格式
.cus-format-textarea {
  white-space: pre-wrap;
}

// ----------带有伪选择器的瀑布流，且需要2或3行/列时
.grid-masonry {
  flex-direction: column;
  height: 700px;

  &--2 {
    >div {
      &:nth-child(2n + 1) {
        order: 1;
      }

      &:nth-child(2n) {
        order: 2
      }
    }

    &:before {
      content: '';
      flex: 1 0 100% !important;
      width: 0 !important;
      order: 1;
    }
  }



  &--3 {
    >div {
      &:nth-child(3n + 1) {
        order: 1;
      }

      &:nth-child(3n + 2) {
        order: 2
      }

      &:nth-child(3n) {
        order: 3
      }
    }

    &:before,
    &:after {
      content: '';

      flex: 1 0 100% !important;
      width: 0 !important;
      order: 2;
    }

  }

  // &--4 {
  //   >div {
  //     &:nth-child(4n + 1) {
  //       order: 1;
  //     }

  //     &:nth-child(4n + 2) {
  //       order: 2
  //     }

  //     &:nth-child(4n + 3) {
  //       order: 3
  //     }

  //     &:nth-child(4n) {
  //       order: 4
  //     }

  //   }

  //   &:before,
  //   &:after {
  //     content: '';

  //     flex: 1 0 100% !important;
  //     width: 0 !important;
  //     order: 3;
  //   }
  // }

  // &--6 {
  //   >div {
  //     &:nth-child(6n + 1) {
  //       order: 1;
  //     }

  //     &:nth-child(6n + 2) {
  //       order: 2
  //     }

  //     &:nth-child(6n + 3) {
  //       order: 3
  //     }

  //     &:nth-child(6n + 4) {
  //       order: 4
  //     }

  //     &:nth-child(6n + 5) {
  //       order: 5
  //     }

  //     &:nth-child(6n) {
  //       order: 6
  //     }
  //   }

  //   &:before,
  //   &:after {
  //     content: '';

  //     flex: 1 0 100% !important;
  //     width: 0 !important;
  //     order: 5;
  //   }

  // }
}

.text-dui {
  color: var(--dui-color);
}

.bg-dui {
  background-color: var(--dui-color);
}